<template>
	<view class="home">

		<!--  :key="item.id"  -->
		<scroll-view scroll-x class="navscroll">
			<view class="item" :class="index==navIndex ? 'active' : ''" v-for="(item,index) in navArr"
				@click="clickNav(index,item.id)" :key="item.ids">{{item.classname}}</view>
		</scroll-view>

		<view class="share-viwe">
			<button open-type="share" type="primary">分享</button>
		</view>

		<view class="content" :style="'height:'+clentHeight+'px;'">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<view>{{tips || "无点击数据" }} </view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="wo">
					我是小程序
				</view>
				<!-- #endif -->
				<!--@myenv="myenv"-->
				<!-- @click.native="onclick" -->
				<newsbox :item="item" :texts.sync="tips" @click.native="goDetail(item)"></newsbox>
			</view>
		</view>

		<view class="nodata" v-if="!newsArr.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>

		<view class="loading" v-if="newsArr.length">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多了~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				navArr: [],
				newsArr: [],
				currentPage: 1,
				currentId: 50,
				loading: 0, //0默认  1加载中  2没有更多了
				tips: "",
				//内容块的高度值
				clentHeight: 0,
			}
		},
		onLoad() {
			this.getNavData();
			this.getNewsData();

			this.getTex();
			console.log('refresh');
			// setTimeout(function () {
			// 	uni.stopPullDownRefresh();
			// }, 1000);
		},
		onPullDownRefresh() { //下拉刷新 1 组件传值修改 2 请求接口 转圈圈图标
			console.log('refresh');
			// this.navIndex = index;
			this.currentPage = 1;
			// this.currentId = id;
			this.newsArr = []
			this.loading = 0;
			this.getNewsData();
			console.log("监听用户下拉动作，一般用于下拉刷新，参考示例")
		},
		onReachBottom() {
			console.log("到底部了")
			if (this.loading == 2) {
				return;
			}
			this.currentPage++;
			this.loading = 1;
			this.getNewsData();
		},

		onReady() { //监听页面初次渲染完成
			// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		this.clentHeight = res.windowHeight - this.getClientHeight();
			// 	}
			// })
			let view = uni.createSelectorQuery().in(this).select(".content");
			// let view = uni.createSelectorQuery().select(".content");
			view.boundingClientRect(data => {
				console.log("得到布局位置信息" + JSON.stringify(data));
				console.log("节点离页面顶部的距离为" + data.top);

				this.clentHeight = data.height
			}).exec();


		},

		methods: {
			onclick(data) { //原生自定义事件
				console.log("原生自定义事件", data);
			},
			myenv(data) { //父子组件传值
				this.tips = data.texts
				console.log("data", data);
			},
			//点击导航切换
			clickNav(index, id) {
				console.log("clickNav", id);
				this.navIndex = index;
				this.currentPage = 1;
				this.currentId = id;
				this.newsArr = []
				this.loading = 0;
				this.getNewsData(id);
			},
			//跳转到详情页
			goDetail(item) {
				uni.navigateTo({
					url: `/pagesB/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},

			//获取导航列表数据
			getNavData() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: res => {
						console.log(res)
						res.data.forEach((ment) => {
							ment.ids = ment.id + 'img'
						})
						this.navArr = res.data
					}
				})
			},
			//获取新闻列表数据
			getNewsData() {
				uni.showLoading({
					title: '加载中'
				});

				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data: {
						cid: this.currentId,
						page: this.currentPage
					},
					success: res => {
						console.log(res)
						if (res.data.length == 0) {
							this.loading = 2
						}
						this.newsArr = [...this.newsArr, ...res.data]
					},
					fail: res => {
						console.log("res", res)
					},
					complete: res => {
						// console.log("complete",res)
						uni.hideLoading();
						uni.stopPullDownRefresh();

					}
				})
			},


			getTex() {
				uni.request({
					url: "http://172.20.10.4:3000/api/index",
					// data: {
					// 	cid: this.currentId,
					// 	page: this.currentPage
					// },
					success: res => {
						console.log(res)

					},
					fail: res => {
						console.log("res", res)
					},
					complete: res => {


					}
				})

			},


			getimg(index) {
				return `${index}123`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navscroll {
		height: 100rpx;
		background: #F7F8FA;
		white-space: nowrap;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 10;

		/deep/ ::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}

		.item {
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
			color: #333;

			&.active {
				color: #31C27C;
			}
		}
	}

.share-viwe{
	padding: 30rpx;
	padding-top: 130rpx;
}
	.content {
		padding: 30rpx;
		padding-top: 130rpx;

		.row {
			border-bottom: 1px dotted #efefef;
			padding: 20rpx 0;
		}
	}

	.nodata {
		display: flex;
		justify-content: center;

		image {
			width: 360rpx;
		}
	}

	.loading {
		text-align: center;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}
</style>